<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git提交信息规范指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-bg {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.8;
            margin-right: 0.5rem;
            color: #4f46e5;
            font-weight: bold;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .example-box {
            border-left: 4px solid #4f46e5;
            background-color: #f8fafc;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <div class="hero-bg text-white py-20 px-6">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Git 提交信息规范指南</h1>
            <p class="text-xl mb-8 opacity-90">编写清晰可读的提交信息，提升团队协作效率</p>
            <div class="flex justify-center space-x-4">
                <a href="#intro" class="px-6 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-opacity-90 transition">
                    <i class="fas fa-book-open mr-2"></i>开始阅读
                </a>
                <a href="#best-practices" class="px-6 py-3 border-2 border-white text-white rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">
                    <i class="fas fa-star mr-2"></i>最佳实践
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-6 py-16">
        <!-- Introduction Section -->
        <section id="intro" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-info-circle text-indigo-600"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif">为什么提交信息如此重要？</h2>
            </div>
            <p class="text-lg mb-6 drop-cap">在日常的项目开发中，Git 是协作的基石，而 Git 提交信息（Commit Message）则是团队成员之间交流的重要桥梁。一个清晰可读、简洁明了的提交信息不仅能帮助团队成员理解代码变更的内容，也能在后期的维护中提高代码质量和可追溯性。</p>
            <div class="grid md:grid-cols-2 gap-6 mt-10">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                            <i class="fas fa-users text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold">提升协作效率</h3>
                    </div>
                    <p class="text-gray-600">提交信息可以帮助团队成员快速了解某个提交的目的和内容，避免重复劳动。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fas fa-search text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold">帮助代码审查</h3>
                    </div>
                    <p class="text-gray-600">清晰的提交信息使得代码审查过程更加高效，审查者可以通过提交信息了解变更的上下文。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                            <i class="fas fa-tools text-blue-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold">便于后期维护</h3>
                    </div>
                    <p class="text-gray-600">当代码发生问题时，提交信息能够帮助开发者追踪问题的来源，快速定位到相关提交。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <i class="fas fa-chart-line text-green-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold">提升项目管理</h3>
                    </div>
                    <p class="text-gray-600">清晰的提交信息可以帮助项目经理了解项目进展，判断开发工作是否按计划推进。</p>
                </div>
            </div>
        </section>

        <!-- Structure Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-layer-group text-indigo-600"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif">提交信息的基本结构</h2>
            </div>
            <p class="text-lg mb-8">一个标准的 Git 提交信息通常由三部分组成：标题（Subject）、正文（Body）和脚注（Footer）。</p>
            
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-indigo-500 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-700">1. 标题（Subject）</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-indigo-500 mr-2">•</span>
                            <span>简洁明了地描述提交的目的</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-indigo-500 mr-2">•</span>
                            <span>通常限制在 50 字符以内</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-indigo-500 mr-2">•</span>
                            <span>使用命令式动词</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-purple-500 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-purple-700">2. 正文（Body）</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2">•</span>
                            <span>详细解释提交的动机和背景</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2">•</span>
                            <span>每行不超过 72 字符</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2">•</span>
                            <span>描述解决方案和影响</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-blue-500 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700">3. 脚注（Footer）</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>记录补充信息</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>关联任务或 bug 编号</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <span>破坏性变更提示</span>
                        </li>
                    </ul>
                </div>
            </div>

            <h3 class="text-2xl font-bold mb-6 font-serif">2.1 标题（Subject）</h3>
            <p class="mb-6">标题是提交信息的第一部分，也是最重要的部分。一个好的标题应具备以下几个特点：</p>
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-bold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i> 正确示例
                        </h4>
                        <div class="example-box p-4 rounded">
                            <p class="font-mono text-sm">修复登录功能中用户验证的 bug</p>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-times-circle text-red-500 mr-2"></i> 错误示例
                        </h4>
                        <div class="example-box p-4 rounded">
                            <p class="font-mono text-sm text-gray-400">修改了登录功能中的一些问题</p>
                        </div>
                    </div>
                </div>
            </div>

            <h3 class="text-2xl font-bold mb-6 font-serif">2.2 正文（Body）</h3>
            <p class="mb-6">正文部分主要用来详细描述提交的动机、背景、解决的具体问题以及任何可能影响其他开发者的事项。</p>
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <div class="example-box p-4 rounded">
                    <p class="font-mono text-sm">
                        修复了登录功能中用户验证的 bug<br><br>
                        在处理用户登录时，发现当用户输入错误密码时，验证逻辑无法正确返回错误信息。通过调整验证逻辑，确保用户错误密码时能够正确提示。<br><br>
                        此修改影响了登录功能的验证部分，已经在本地通过单元测试进行了验证。
                    </p>
                </div>
            </div>

            <h3 class="text-2xl font-bold mb-6 font-serif">2.3 脚注（Footer）</h3>
            <p class="mb-6">脚注部分通常用于记录一些额外的、有用的信息，如关联的任务编号、修复的 bug 编号、破坏性变更的提示等。</p>
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-bold text-gray-700 mb-3">关联任务</h4>
                        <div class="example-box p-4 rounded">
                            <p class="font-mono text-sm">关联任务：TASK-123</p>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-700 mb-3">破坏性变更</h4>
                        <div class="example-box p-4 rounded">
                            <p class="font-mono text-sm">注意：此次提交包含破坏性变更，影响 API 的参数结构。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Best Practices Section -->
        <section id="best-practices" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-medal text-indigo-600"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif">提交信息的最佳实践</h2>
            </div>
            
            <div class="space-y-8">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">1</span>
                        保持简洁且直观
                    </h3>
                    <p class="text-gray-600">提交信息应该尽可能简洁，避免冗长或模糊的描述。标题部分最好控制在 50 个字符以内，正文部分每行控制在 72 个字符以内。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3">2</span>
                        按照约定的格式编写
                    </h3>
                    <p class="text-gray-600">在团队开发中，建议为提交信息制定统一的规范或约定，包括必须包含的标题、正文和脚注部分。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">3</span>
                        避免过于频繁的小提交
                    </h3>
                    <p class="text-gray-600">建议在某一功能完成后再进行提交，而不是每修改一行代码就提交一次。过于频繁的提交不利于代码的管理。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">4</span>
                        一次提交一个目的
                    </h3>
                    <p class="text-gray-600">每次提交应该专注于一个特定的功能或修复。避免将多个不相关的变更放在同一个提交中。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-3">5</span>
                        在提交信息中包含上下文
                    </h3>
                    <p class="text-gray-600">特别是在处理复杂问题时，提交信息中应包含适当的上下文说明，让其他开发者能够理解变更的背景。</p>
                </div>
            </div>
        </section>

        <!-- Examples Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-code text-indigo-600"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif">提交信息实例分析</h2>
            </div>
            
            <div class="space-y-8">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-700">1. 修复 bug</h3>
                    <div class="example-box p-4 rounded">
                        <p class="font-mono text-sm">
                            修复登录功能中用户验证的 bug<br><br>
                            在处理用户登录时，发现当用户输入错误密码时，验证逻辑无法正确返回错误信息。通过调整验证逻辑，确保用户错误密码时能够正确提示。<br><br>
                            关联任务：TASK-123
                        </p>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-purple-700">2. 新增功能</h3>
                    <div class="example-box p-4 rounded">
                        <p class="font-mono text-sm">
                            增加用户注册功能<br><br>
                            新增了用户注册页面，支持用户通过邮箱注册账号。增加了邮箱格式验证和密码强度验证。<br><br>
                            此功能已通过单元测试，前端页面也已完成。
                        </p>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700">3. 重构代码</h3>
                    <div class="example-box p-4 rounded">
                        <p class="font-mono text-sm">
                            重构用户登录模块，提升代码可维护性<br><br>
                            对用户登录模块进行了重构，将验证逻辑和 UI 逻辑分离，提高了代码的可读性和可维护性。此次重构不影响现有功能。<br><br>
                            注意：此次重构不涉及新的功能实现，仅提升代码结构。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-project-diagram text-indigo-600"></i>
                </div>
                <h2 class="text-3xl font-bold font-serif">Git提交信息结构可视化</h2>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="mermaid">
                    flowchart TD
                        A[Git Commit Message] --> B[标题 Subject]
                        A --> C[正文 Body]
                        A --> D[脚注 Footer]
                        B --> E["简洁明了<br>≤50字符"]
                        B --> F["使用命令式动词"]
                        C --> G["详细解释动机"]
                        C --> H["≤72字符/行"]
                        D --> I["关联任务"]
                        D --> J["破坏性变更"]
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-4xl mx-auto px-6">
            <div class="text-center">
                <h3 class="text-xl font-semibold mb-2">技术小馆</h3>
                <p class="text-gray-400 mb-4">探索技术之美，分享开发经验</p>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-300 hover:text-indigo-100 transition" target="_blank">
                    <i class="fas fa-external-link-alt mr-1"></i> http://www.yuque.com/jtostring
                </a>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>